import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';

//component
import SetHelmet from 'components/widgets/SetHelmet';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'Home';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    changeToYuan(rmb) {
        if (!rmb) {
            return '0.00';
        }
        return (rmb / 100).toFixed(2);
    }

    render() {
        let userIncome = this.store.userIncome;
        let orderIncome = this.store.orderIncome;

        return (
            <div className="orin-s-home-root">
                <SetHelmet title="艺维管理后台"/>
                <div className="home-content">
                    <div className="module-title">用户管理</div>
                    <div className="module-list">
                        <div className="module-item-all">
                            <span className="item-text">
                                总用户
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {userIncome.all || 0}
                                </span>
                            </p>
                        </div>
                        <div className="module-item">
                            <span className="item-text">
                                今日
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {userIncome.today || 0}
                                </span>
                            </p>
                        </div>
                        <div className="module-item">
                            <span className="item-text">
                                本月
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {userIncome.month || 0}
                                </span>
                            </p>
                        </div>
                        <div className="module-item">
                            <span className="item-text">
                                本季
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {userIncome.quarter || 0}
                                </span>
                            </p>
                        </div>
                        <div className="module-item">
                            <span className="item-text">
                                本年
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {userIncome.year || 0}
                                </span>
                            </p>
                        </div>
                    </div>
                    <div className="module-title">订单管理</div>
                    <div className="module-list">
                        <div className="module-item-all">
                            <span className="item-text">
                                总收入
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {this.changeToYuan(orderIncome.all)}
                                </span>
                            </p>
                        </div>
                        <div className="module-item">
                            <span className="item-text">
                                今日
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {this.changeToYuan(orderIncome.today)}
                                </span>
                            </p>
                        </div>

                        <div className="module-item">
                            <span className="item-text">
                                本月
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {this.changeToYuan(orderIncome.month)}
                                </span>
                            </p>
                        </div>
                        <div className="module-item">
                            <span className="item-text">
                                本季
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {this.changeToYuan(orderIncome.quarter)}
                                </span>
                            </p>
                        </div>
                        <div className="module-item">
                            <span className="item-text">
                                本年
                            </span>
                            <p className="item-count-text">
                                <span>
                                    {this.changeToYuan(orderIncome.year)}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}